@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');
* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #423F3F;
    line-height: 28px;
    letter-spacing: normal;
    font-family: 'Quicksand', sans-serif;
    background-color: #1b1e2d;
}


/**** Layout ****/
#container {
    width: 90%;
    margin: auto;
}
header {
    padding: 1em 1em;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #ffffff;
}
.logo {
    width: 360px;
}
.logo img {width: 100%;}
.nav {
    width: calc(100% - 400px); /* nav will take up the remaining space */
    margin-left: auto;
}
.main-row-1, .main-row-2, .main-row-3 {
    padding-top: 60px;
    position: relative;
    overflow: hidden;
}
.wedge-right::before, .wedge-left::before {
    content: '';
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    overflow: visible;
    position: absolute;
    background-color: #ffffff;
}
.wedge-right::before {
    -webkit-transform: skewY(2deg);
    -moz-transform: skewY(2deg);
    -ms-transform: skewY(2deg);
    -o-transform: skewY(2deg);
    transform: skewY(2deg);
    transform-origin: 0 100%;
    --ms-transform-origin: 0 100%;
}
.wedge-left::before {
    -webkit-transform: skewY(-2deg);
    -moz-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);
    -o-transform: skewY(-2deg);
    transform: skewY(-2deg);
    transform-origin: 100% 0;
    --ms-transform-origin: 0 100%;
}
.landing {
    display: flex;
    padding: 20vh 0;
    flex-flow: column;
    align-items: center;
}
.product {
    padding: 20vh 3rem;
    min-height: 80vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.content {background-color: #ffffff;} /* change for dark mode */
.add-feat {text-align: center;}
.add-feat__content {text-align: left;}
.feat-list {
    flex: 1;
    min-width: 300px;
}
.feature {padding: 1.5rem 0;}
.feat-name {
    flex: 1;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feat-option {flex: 2;}
.side-left {margin-right: 1.5em;}
.side-left, .side-right {
    flex-flow: column;
    flex: 1;
}
.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.project-card {
    flex-basis: 50%;
    text-align: center;
    margin: 4em 0;
}
footer {
    padding: 100px 0;
    display: flex;
    flex-wrap: wrap;
}
footer section {
    padding: 0 50px;
    flex: 1;
}


/***** Add the top navigation *****/
/* Add a black background color to the top navigation */
.topnav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
/* Style the links inside the navigation bar */
.topnav a {
    font-size: 0.9rem;
    color: inherit;
}
/* Change the weight of links on hover */
.topnav a:hover,
.topnav a:focus,
.topnav a:active {
    font-weight: 600;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}



/***** Style the tab *****/
.tab {
    height: 70px;
    margin-top: 1rem;
    display: flex;
    overflow: hidden;
    border-bottom: 2px solid #1b1e2d;
    background-color: #f1f1f1;
} 
/* Style the buttons that are used to open the tab content */
.tab button {
    flex: 1;
    padding: 1rem;
    border: none;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
    background-color: inherit;
}
/* Change bottom border color of buttons on hover and focus and create an active/current tablink class */
.tab button:hover, .tab button:focus, .tab button.active { border-bottom: 5px solid #1b1e2d; }
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 2rem 3rem 10vh;
    border: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.tabcontent p {margin-bottom: 2.5rem;}


/***** Style form and form elements *****/
form {font-size: .8rem;}
form input, form select {
    height: 2rem;
    margin-bottom: 1em;
    font-size: inherit;
    border: 1px solid rgba(66, 63, 63, 0.5);
}
form input:hover,
form select:hover,
form input:focus,
form select:focus {
    border-bottom: 2px solid #1a73e8;
}
form input, 
.sides {
    width: 400px;
}
form select { width: 188px;}
form textarea,
form button {
    margin-bottom: 2em;
}
form input,
form textarea {
    padding: 1em;
}
.form-container,
.form-input,
.checkbox,
.group-input,
.add-feat__content,
.feature,
.feat-name,
.feat-option,
.sides,
.side-left,
.side-right {
    display: flex;
    flex-wrap: wrap;
}
.form-container {
    padding: 2rem;
    border-top: 1px solid #423F3F;
}
.form-heading {
    flex: 1;
    margin-bottom: auto;
    font-weight: 600;
}
.form-input {
    flex: 1;
    flex-flow: column;
}
.group-input {
    margin-bottom: 3rem;
    flex-flow: column;
}


/***** Customize the label *****/
.check {
    margin: 1rem 0;
    padding-left: 35px;
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
/* Hide the browser's default checkbox */
.check input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom checkbox and job card checkmark */
.checkmark {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(66, 63, 63, 0.8);
}
.job-card .checkmark {
    top: 16px;
    left: 16px;
    border: none;
}
/* On mouse-over and focus */
.check:hover input ~ .checkmark,
.check:focus input ~ .checkmark {
    border-width: 0 3px 3px 0;
    border: solid #1a73e8;
}
.job-card:hover input ~ .checkmark {border: 0px solid #1a73e8;}
/* When the checkbox is checked, change background-color */
.check input:checked ~ .checkmark {
    background-color: #1a73e8;
    border: 1px solid #1a73e8;
}
.job-card input:checked ~ .checkmark {
    background-color: #ffffff;
    border: 0px solid #1a73e8;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.check input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */
.check .checkmark:after {
    width: 5px;
    height: 10px;
    left: 7px;
    bottom: 5px;
    border: none;
    border-right: 3px solid #ffffff;
    border-bottom:  3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.job-card .checkmark:after {
    width: 10px;
    height: 20px;
    border: none;
    border-right: 4px solid #1a73e8;
    border-bottom: 4px solid #1a73e8;
}
/* Style job cards */
.job-card {
    width: 200px;
    height: 150px;
    display: flex;
    padding: 1em;
    font-size: 24px;
    font-weight: 600;
    color: #423f3f;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.job-card:hover{
    color: #423f3f;
    box-shadow: 0px 0px 3px rgba(26, 115, 232, 0.7);
}


/***** Style date picker *****/
[type="date"] {
    width: 188px;
    background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat;
}
/* hide defaults */
[type="date"]::-webkit-inner-spin-button {display: none;}
[type="date"]::-webkit-calendar-picker-indicator {opacity: 0;}
/* custom styles */
label {display: block;}
[type="tel"] {width: 188px;}


/***** Style file upload button *****/
.uploader {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.upload-btn {
    margin-left: 1em;
    padding: 0.7em 1.2em;
    font-size: 1rem;
    font-weight: 500;
    color: #423F3F;
    border: 1px solid #423F3F;
    background-color: #ffffff;
}
.upload-btn:hover,
.upload-btn:focus {
    border: 1px solid #1a73e8;
}
.uploader input[type=file] {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 100px;
    opacity: 0;
    cursor: pointer;
}


/**** Utilities ****/
.landing__info {
    width: 60%;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.landing__img {margin-bottom: 2rem;}
.landing__info p {margin-bottom: 1.8em;}
.product__info,
.product__img,
.product__action {
    flex: 1;
}
.product__info ul li{
    margin-bottom: 1.3rem;
    list-style: none;
    line-height: 28px;
}
.product__img {
    text-align: center;
}
.product__action {
    min-width: 300px;
    display: flex;
    flex-flow: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.btn,
.sec-btn {
    padding: 1em 1.5em;
    margin-right: 2em;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid transparent;
    display: block;
    border-radius: 50px;
    transition: background-color 1s, color 1s;
}
.btn {background-color: #1a73e8;}
.sec-btn {background-color: rgba(66, 63, 63, 0.7);}
.btn:hover,
.btn:focus {
    background-color: #ffffff;
    border: 1px solid #1a73e8;
    color: #1a73e8;
}
.sec-btn:hover,
.sec-btn:focus {
    background-color: #ffffff;
    border: 1px solid rgba(66, 63, 63, 0.7);
    color: rgba(66, 63, 63, 1);
}
.small {width: 188px;}
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.msg-to-user {
    color: #ee0000;
    font-weight: 500;
}
a {
    text-decoration: none;
    color: inherit;
}
p {margin-bottom: 1rem;}
address {font-style: normal;}
h1 {
    color: inherit;
    font-size: 48px;
    line-height: 74px;
    font-weight: 500;
    margin-bottom: 2rem;
}
h2, h3, h4 {
    color: inherit;
    font-weight: 600;
    margin-bottom: 1.6rem;
}
h2 {
    font-size: 34px;
    line-height: 44px;
}
h3 {
    font-size: 24px;
    line-height: 32px;
}
h4 {
    font-size: 22px;
    line-height: 28px;
}
footer {color: rgba(255, 255, 255, 0.5);}
footer a:hover,
footer a:focus {
    color: rgba(255, 255, 255, 1);;
}
footer h3 {color: rgba(255, 255, 255, 0.8);}
footer li {
    list-style: none;
    margin-bottom: 1.5rem;
}
.message {
    height: 90vh;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1080px) {
    header {width: 100%; flex-flow: column;}
    .nav {
        width: 100%;
        padding: 0 2rem;
    }
    .topnav {
        flex-flow: column;
    }
    .topnav a {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
        font-size: 2em;
    }
  
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
        padding: 1em 0;
      float: none;
      display: block;
      text-align: left;
    }
    /* set form container to flow column */
    .form-container {
        flex-flow: column;
        padding: 0;
    }
    /* decrease the size of the inputs */
    [type="tel"],
    [type="date"],
    .small,
    form select{
        width: 150px;
    }
    form input,
    .sides {
        width: 300px;
    }
    .cards {align-items: center;}
    .job-card {width: 400px;}
}